<template>
    <div class="living flex" :style="{ height }">
        <iframe
            v-if="playUrl"
            :src="playUrl"
            frameborder="0"
            class="flex grow"
        ></iframe>
        <div v-else class="livingNotice"></div>
    </div>
</template>
<script>
import {mapState} from "vuex";
import report from "../script/report";
import hub, {SCREEN_CHANGE} from "../script/hub";

export default {
    data() {
        return {
            height: "0",
        };
    },
    computed: {
        ...mapState(["playUrl"]),
    },
    watch: {
        //根据URL变换做数据统计
        playUrl: {
            immediate: true,
            handler(playUrl) {
                report(playUrl);
            },
        },
    },
    mounted() {
        this.setFrameHeight();
        window.addEventListener("resize", () => {
            this.setFrameHeight();
        });

        //全屏状态
        hub.on(SCREEN_CHANGE, (val) => {
            this.setFrameHeight(val);
        });
    },
    methods: {
        setFrameHeight(small = true) {
            const value = small ? 310 : 0;
            this.height = document.body.clientHeight - value + "px";
        },
    },
};
</script>
